import { request } from "../../request/index"
Page({

  data: {
    //左侧菜单数据
    leftMenuList: [],
    //右侧商品数据
    rightCateList: [],
    //判断被点击菜单的索引值
    currentIndex: 0,
    scrollTop:0,
  },
  CategoryList: [],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 注意! :和以前web 存储值有些不一样  localStorage.setItem("key","value")
    // 小程序的 : wx.setStorageSync("cated",{time:Date.now(),data:this.CategoryList}); 

    // 先判断一下本地储存是否有旧数据
    // 没有旧数据,就发送新请求   
    // 如果有数据而且没过期 就用旧的本地数据进行渲染即可

    //1.获取本地储存中的数据
    const Cated = wx.getStorageSync("cated");
    //判断是否有缓存数据
    if (!Cated) {
      this.getCategoryList()
    } else {
      //判断数据是否过期
      if(Date.now()-Cated.time >10000)
      //数据过期了 重新发送请求
      return this.getCategoryList()
      //没有过期  使用旧的数据赋值
      this.CategoryList = Cated.data
      //将缓存的数据接入左右菜单商品中
      let leftMenuList = this.CategoryList.map(item => item.cat_name)
      let rightCateList = this.CategoryList[0].children
      this.setData({
        leftMenuList,
        rightCateList
      })
    }
  },
  // 获取分类数据
  getCategoryList() {
    request({
      url: '/categories'
    }).then(res => {
      console.log(res)
      this.CategoryList = res.data.message;
      //拿到数据的时候将其存储到本地储存中
      wx.setStorageSync("cated", { time: Date.now(), data: this.CategoryList });

      //构建左侧菜单数据
      let leftMenuList = this.CategoryList.map(item => item.cat_name)
      // 构造右侧的商品数据
      let rightCateList = this.CategoryList[0].children
      this.setData({
        leftMenuList,
        rightCateList
      })
    })
  },
  //左侧菜单的点击事件
  menuClick(e) {
    //获取索引将左侧菜单渲染变色
    let { index } = e.currentTarget.dataset
    //根据索引获取右侧对应的商品数据
    let rightCateList = this.CategoryList[index].children
    this.setData({
      currentIndex: index,
      rightCateList,
      //重新设置滚动高度为0
      scrollTop:0
    })
  }

})